<!-- 产品溯源  -->
<template>
	<view style="padding: 20upx 0upx;">
		<!-- 产品 -->
		<view class="information-car">
			<!-- 图片 -->
			<view class="row-start image-view">
				<image :src="(productData.sourceId ? sourceImgSite : imgSite) + productData.coverPicture" mode=""></image>
				<view>{{productData.productTitle}}</view>
			</view>
			<!-- 产品 hash -->
			<HashCodeComponents :code="productData.productHash"></HashCodeComponents>
		</view>

		<ListComponents title="产品信息" :dataList="data.msgListData" style="margin-bottom: 20upx;"></ListComponents>

		<ListComponents title="生产厂商" :dataList="data.manufacturerData" style="margin-bottom: 41upx;"></ListComponents>

		<!-- 流程图 按钮 -->
		<view class="row-div flowChart-button" style="margin-bottom: 55upx;" @click="getTraceabilityGraph">查看该商品简易溯源流程图</view>
		<FlowChart v-if="flowShow" @cancel="flowShow = false" :dataList="flowChartArr"></FlowChart>
	</view>
</template>

<script>
	import ListComponents from './listComponents.vue';
	import HashCodeComponents from './hashCodeComponents.vue';
	import FlowChart from '../../../../components/flow/flow.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		props: {
			goodsCd: String,
			data: Object,
			productData: Object
		},
		computed: {
			...mapState(['imgSite', 'sourceImgSite'])
		},
		components: {
			ListComponents,
			HashCodeComponents,
			FlowChart
		},
		data() {
			return {
				flowShow: false,
				flowChartArr: [],
				title: ''
			}
		},
		beforeMount() {
			console.log('productData', this.productData)
			this.getRequestSource()
		},
		methods: {
			getTraceabilityGraph() {
				console.log(this.productData);
				this.$api.globalUtil.requestAjax({
					url: '/goodsSourceApi/traceabilityGraph',
					method: "POST",
					data: {
						goodsCd: this.goodsCd,
						parentId: '',
						productTitle: this.productData.productTitle
					},
					success: (res) => {
						console.log("success", res)
						if (res.data.success) {
							this.flowShow = true
							this.flowChartArr = res.data.response.response
						}
					}
				});
			},
			getRequestSource() {
				return this.$api.globalUtil.requestAjax({
					url: '/goodsSourceApi/source',
					method: "POST",
					data: {
						goodsCd: this.goodsCd || '',
					},
					success: (res) => {
						if (res.data.response && res.data.response.length) {
							this.title = res.data.response[0].sourceResultForm.title
						}
					}
				});
			},
			flowShowClist() {
				this.flowShow = true
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 产品 */
	.information-car {
		background: #FFFFFF;
		border-radius: 16upx;
		padding: 0upx 30upx 41upx 30upx;
		font-size: 26upx;
		font-family: PingFang SC;
		color: #333333;
		margin-bottom: 20upx;

		.image-view {
			padding: 50upx 0upx;
			border-bottom: 1upx solid #EEEEEE;
			margin-bottom: 39upx;

			image {
				width: 140upx;
				height: 140upx;
				border-radius: 10upx;
			}

			view {
				width: calc(100% - 140upx - 42upx);
				margin-left: 42upx;
				font-size: 30upx;
				font-weight: bold;

			}
		}

		.title {
			font-weight: bold;
			margin-bottom: 25upx;
		}

		.hashcode-text {
			flex: 1;
			word-break: break-all;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE5E49;
			line-height: 42upx;
		}

		.copy-view {
			width: 90upx;
			height: 90upx;
			border: 1upx solid #EEEEEE;
			box-shadow: 0upx 3upx 8upx 0upx rgba(172, 170, 170, 0.1);
			border-radius: 45upx;
			font-size: 22upx;
			font-weight: 500;
			margin-left: 66upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-bottom: 6upx;
			}
		}
	}

	/* 产品信息 */
	.information {
		background: #FFFFFF;
		border-radius: 16upx;
		font-family: PingFang SC;
		color: #333333;

		.title {
			padding: 40upx 0upx;
			font-size: 32upx;
			font-weight: bold;

			&::before {
				content: " ";
				width: 5upx;
				height: 30upx;
				background: linear-gradient(-30deg, #EC2400 0%, #FF7E00 100%);
				border-radius: 3upx;
				margin-right: 30upx;
			}
		}

		/* 信息列表 */
		.msg-list {
			padding: 0upx 30upx;

			.list {
				padding: 30upx 0upx;
				border-top: 1upx solid #EEEEEE;
				font-family: PingFang SC;
				font-size: 26upx;

				view:first-of-type {
					color: #999999;
					font-weight: 500;
					flex: 1;
					margin-right: 79upx;
				}

				view:last-of-type {
					color: #333333;
					font-weight: 500;
				}
			}

			&:last-of-type .list {
				view:first-of-type {
					flex: none;
				}
			}

		}
	}

	/* 流程图 按钮 */
	.flowChart-button {
		width: 690upx;
		height: 87upx;
		background: #FE5E49;
		box-shadow: 0upx 4upx 12upx 0upx rgba(255, 102, 0, 0.2);
		border-radius: 44upx;
		font-size: 34upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin: 0 auto;
	}
</style>
